<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}

        .parentWrap {
            width: 200px;
            text-align:center;

        }

        .menuGroup {
            border:1px solid #999;
            background-color:#e0ecff;
        }

        .groupTitle {
            display:block;
            height:20px;
            line-height:20px;
            font-size: 16px;
            border-bottom:1px solid #ccc;
            cursor:pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color:#fff;
            display:none;
        }

    </style>

    <script src="jquery-1.11.1.min.js"></script>
    <script>
       $(function(){
           $(".groupTitle").click(function(){
               $(this).next().show();
               $(this).parent().siblings("li").children("div").hide();
           })
       })
    </script>
</head>
<body>
   <ul class="parentWrap">
       <li class="menuGroup">
           <span class="groupTitle">标题1</span>
           <div>我是弹出的div1</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题2</span>
           <div>我是弹出的div2</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题3</span>
           <div>我是弹出的div3</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题4</span>
           <div>我是弹出的div4</div>
       </li>
   </ul>
</body>
</html>